import React, { Component } from "react";
// 1.0 导入样式
import "./index.css";

class IndexDemo extends Component {
  // 1.0 定义评论人和评论内容的状态属性
  state = {
    cinfo: {
      cname: "小白", // 评论人，这个属性是和评论人控件进行绑定的
      ctxt: "你好，小青", // 评论内容，这个属性是和评论内容控件进行绑定的
    },
    //   3.0 - 第一步：定义评论列表需要的数组对象
    clist: [
      //   {
      //     cname: "小白",
      //     ctxt: "你好，小青",
      //   },
    ],
  };

  // 2.0 通过在评论人和评论内容的控件上绑定onChange事件来获取到用户输入的内容
  handerChange = (e) => {
    // console.log(e.target.value);
    //   1.0 获取两个元素的值
    let val = e.target.value;
    //   2.0 获取元素的name属性
    let pname = e.target.name;

    // 3.0 根据用户输入的内容修改state.cinfo中的值
    let old_cinfo = this.state.cinfo;

    //   4.0 改变old_cinfo这个对象中的对应的属性的值
    old_cinfo[pname] = val;
    //   5.0 修改状态
    this.setState({
      cinfo: old_cinfo,
    });
  };

  // 4.0 点击发表评论按钮的时候收集用户输入的最新值，push到this.state.clist数组中
  handerClick = () => {
    //   1.0 收集用户输入的最新数据
    let info = this.state.cinfo;
    //   2.0 将info添加到this.state.clist中
    let old_clist = this.state.clist;
    old_clist.unshift(info);

    this.setState({
      cinfo: {
        cname: "",
        ctxt: "",
      },
      clist: old_clist,
    });
  };
  render() {
    return (
      <div className="box">
        <div className="top">
          <input
            type="text"
            name="cname"
            placeholder="请输入评论人"
            value={this.state.cinfo.cname}
            onChange={this.handerChange}
          />
          <textarea
            cols="30"
            rows="10"
            name="ctxt"
            placeholder="请输入评论内容"
            value={this.state.cinfo.ctxt}
            onChange={this.handerChange}
          ></textarea>
          <button onClick={this.handerClick}>发表评论</button>
        </div>
        <div className="bottom">
          {/* 判断如果没有评论数据则显示，您没有评论过 */}
          {this.state.clist.length <= 0 ? (
            <div>您没有评论过</div>
          ) : (
            <ul>
              {/*   3.0 - 第2步：循环渲染评论列表 */}
              {this.state.clist.map((item) => (
                <li key={item.cname}>
                  <p>评论人：{item.cname}</p>
                  <p>评论内容：{item.ctxt}</p>
                </li>
              ))}
            </ul>
          )}
        </div>
      </div>
    );
  }
}

export default IndexDemo;
